// 配置路由相关的信息
import VueRouter from "vue-router";
import Vue from "vue";
// import Home from "../components/Home";
// import About from "../components/About";
// import User from "../components/User";
//使用懒加载的方式写：
const Home = () =>
    import ('../components/Home');
const About = () =>
    import ('../components/About');
const User = () =>
    import ('../components/User');
const HomeNews = () =>
    import ('../components/HomeNews');
const HomeMessage = () =>
    import ('../components/HomeMessage');
const Profile = () =>
    import ('../components/Profile');
// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)
    // 2.创建VueRouter对象
const routes = [
    // 这里配置组件和url的映射关系(一个组件对应一个url)
    {
        path: '',
        // redirect重定向
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        meta: {
            title: '首页'
        },
        children: [{
                path: '',
                // 重定向，给一个默认路径
                redirect: 'news'
            },
            {
                // 这里路由前面不用加/，因为是home的子组件，它会自动拼接
                path: 'news',
                component: HomeNews
            },
            {
                path: 'message',
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: About,
        meta: {
            title: '关于'
        },
        // 路由独享首位
        BeforeEnter: (to, from, next) => {
            // 一进入这个路由就会回调
            next();
        }
    },
    {
        path: '/user/:userid',
        component: User,
        meta: {
            title: '用户'
        }
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    }
];
const router = new VueRouter({
        // 配置路由和组件之间的映射关系
        routes,
        // 去掉url地址中的#
        mode: 'history',
        linkActiveClass: 'active'
    })
    // 前置守卫(huard)
router.beforeEach((to, from, next) => {
        // 从from跳转到to
        // next()是否进行下一步，必须要在这里调用一下
        next();
        // 永远去取matched[0],(在matched[0]里面取meta的title,这样保证一开始页面title不是undefined)
        document.title = to.meta.title
        document.title = to.matched[0].meta.title;
    })
    // 后置钩子(hook)
router.afterEach((to, from) => {
        // 后置钩子不用主动调用next()
    })
    // 3.将router对象传到Vue实例
export default router